<template>
    <div class="list-box">
        <div class="title">
            list-box
            <el-button @click="goback">返回</el-button>
        </div>
        <div class="list">
            <div class="list-item" :draggable="true" @dragstart="dragstart(item.chartType)" v-for="item in demoList" :key="item.chartType">
                {{ item.label }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            demoList: [
                { chartType: 'top', label: '排行图' },
                { chartType: 'bar', label: '柱状图' },
                { chartType: 'pie', label: '饼图' },
                { chartType: 'circular', label: '环形图' },
                { chartType: 'line', label: '折线图' },
                { chartType: 'gauge', label: '仪表图' },
                { chartType: 'radar', label: '雷达图' },
                { chartType: 'funnel', label: '漏斗图' },
            ],
        };
    },
    methods: {
        goback() {
            this.$router.go(-1);
        },
        dragstart(type) {
            this.$store.state.chartDemoType = type;
        },
    },
};
</script>

<style lang="scss" scoped>
.list-box {
    width: 250px;
    height: 100%;
    background: white;
    position: absolute;
    box-shadow: 0px 0px 5px 5px #ccc;
    z-index: 1;
    overflow: hidden;
    .title {
        border-bottom: 1px solid #ccc;
        padding: 10px;
    }
    .list {
        height: calc(100% - 80px);
        overflow: auto;
        .list-item {
            width: 80%;
            height: 100px;
            margin: 10px auto;
            border: 1px solid #ccc;
        }
    }
}
</style>
